<template>
  <div>
    <el-card>
      <span class="page_title">数据概况</span>
    </el-card>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-select size="small" v-model="systemQueryValue" placeholder="请选择">
            <el-option
              v-for="item in systemQueryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="timeQuery"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          ></el-date-picker>
        </el-col>
        <el-col :span="3" :offset="2">
          <el-tag :type="timeFilterType.seven" @click="sevenFilter">7天</el-tag>
          <el-tag :type="timeFilterType.thirty" @click="thirtyFilter">30天</el-tag>
        </el-col>
        <el-col :span="2">
          <a class="clear_filter" @click="clearFilter">清空筛选</a>
        </el-col>
      </el-row>
      <el-row class="statistics">
        <el-col :span="4">
          <div>1642</div>
          <div>
            用户数
            <el-tooltip content="统计全平台用户数，不随店铺的更改而更改" placement="bottom">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
        </el-col>
        <el-col :span="4">
          <div>928</div>
          <div>商品数</div>
        </el-col>
        <el-col :span="4">
          <div>112</div>
          <div>订单数</div>
        </el-col>
        <el-col :span="4">
          <div>23</div>
          <div>待发货订单数</div>
        </el-col>
        <el-col :span="4">
          <div>0</div>
          <div>维权订单数</div>
        </el-col>
        <el-col :span="4">
          <div>69</div>
          <div>商品库存预警</div>
        </el-col>
      </el-row>
    </el-card>
    <div class="charts">
      <el-card>
        <div slot="header" class="clearfix">
          <span>销售情况</span>
          <el-button style="float: right; padding: 3px 0" type="text">导出表单</el-button>
        </div>
        <ve-line :data="sellData"></ve-line>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <span>销售情况</span>
          <el-button style="float: right; padding: 3px 0" type="text">导出表单</el-button>
        </div>
        <ve-pie :data="viewData"></ve-pie>
      </el-card>
    </div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>常用功能</span>
      </div>
      <el-row class="tools">
        <el-col :span="4">
          <i class="el-icon-goods"></i>
          <span>添加商品</span>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-document"></i>
          <span>订单管理</span>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-chat-dot-square"></i>
          <span>售后维权</span>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-data-line"></i>
          <span>数据统计</span>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-magic-stick"></i>
          <span>店铺装修</span>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-set-up"></i>
          <span>设置</span>
        </el-col>
      </el-row>
    </el-card>
    <div class="paihang">
      <el-card>
        <div slot="header" class="clearfix top_paihang">
          <span>商品购买力top排行</span>
          <el-button type="primary" size="mini">导出TOP100</el-button>
        </div>
        <el-table
          class="paihang_table"
          :data="goodsTableData"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column label="排名" type="index" :index="indexMethod">
            <!-- <div v-html="paihang_index"></div> -->
            <!-- <template slot-scope="scope">{{scope.row}}</template> -->
          </el-table-column>

          <el-table-column label="商品" prop="goods_name"></el-table-column>
          <el-table-column label="销售额" prop="goods_sales" sortable width="80"></el-table-column>
          <el-table-column label="销量" prop="goods_count" sortable width="80"></el-table-column>
        </el-table>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix top_paihang">
          <span>用户购买力top排行</span>
          <el-button type="primary" size="mini">导出TOP100</el-button>
        </div>
        <el-table
          class="paihang_table"
          :data="userTableData"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column label="排名" type="index" :index="indexMethod"></el-table-column>
          <el-table-column label="用户">
            <template slot-scope="scope">
              <div class="userInfo">
                <img :src="scope.row.head_pic" />
                <span>{{scope.row.username}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="支付金额" sortable width="100"></el-table-column>
          <el-table-column prop="count" label="支付件数" sortable width="100"></el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- <div v-html="paihang_index"></div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      systemQueryOptions: [
        {
          value: "all",
          label: "全部平台"
        },
        {
          value: "app",
          label: "App"
        },
        {
          value: "wxh5",
          label: "微信公众号"
        },
        {
          value: "wxapp",
          label: "小程序"
        }
      ],
      systemQueryValue: "all",
      timeQuery: [],
      timeFilterType: {
        seven: "info",
        thirty: "info"
      },
      sellData: {
        columns: ["日期", "华东", "华南", "华北", "西部", "其他"],
        rows: [
          {
            日期: "04-08",
            华东: 1393,
            华南: 1093,
            华北: 1232,
            西部: 1503,
            其他: 1620
          },
          {
            日期: "04-09",
            华东: 3530,
            华南: 3230,
            华北: 3026,
            西部: 2980,
            其他: 2635
          },
          {
            日期: "04-10",
            华东: 2923,
            华南: 2623,
            华北: 2800,
            西部: 3013,
            其他: 2630
          },
          {
            日期: "04-11",
            华东: 1723,
            华南: 1423,
            华北: 1856,
            西部: 1684,
            其他: 1359
          },
          {
            日期: "04-12",
            华东: 3792,
            华南: 3492,
            华北: 3023,
            西部: 3021,
            其他: 2830
          },
          {
            日期: "04-13",
            华东: 4593,
            华南: 4293,
            华北: 4136,
            西部: 4659,
            其他: 4010
          },
          {
            日期: "04-14",
            华东: 4230,
            华南: 5412,
            华北: 3546,
            西部: 3864,
            其他: 4368
          },
          {
            日期: "04-15",
            华东: 3986,
            华南: 4356,
            华北: 4632,
            西部: 4230,
            其他: 5321
          }
        ]
      },
      viewData: {
        columns: ["日期", "访问用户"],
        rows: [
          { 日期: "1/1", 访问用户: 1393 },
          { 日期: "1/2", 访问用户: 3530 },
          { 日期: "1/3", 访问用户: 2923 },
          { 日期: "1/4", 访问用户: 1723 },
          { 日期: "1/5", 访问用户: 3792 },
          { 日期: "1/6", 访问用户: 4593 }
        ]
      },
      goodsTableData: [
        {
          goods_name: "金桔（5斤包邮）",
          goods_sales: 1280.0,
          goods_count: 324
        },
        {
          goods_name: "一次性防护口罩（单片独立包装）",
          goods_sales: 279.8,
          goods_count: 2
        },
        {
          goods_name: "五常稻花香2号",
          goods_sales: 1254.0,
          goods_count: 46
        },
        {
          goods_name: "粤北（南雄）腊肉（500g±20g）",
          goods_sales: 332.26,
          goods_count: 4
        }
      ],
      userTableData: [
        {
          username: "恍然如梦。",
          head_pic: "https://qiniuyun.zhichi921.com/head_pic/0.webp",
          amount: 6843.2,
          count: 24
        },
        {
          username: "Alice",
          head_pic: "https://qiniuyun.zhichi921.com/head_pic/1.webp",
          amount: 5861.6,
          count: 20
        },
        {
          username: "繁星点点Dimples_",
          head_pic: "https://qiniuyun.zhichi921.com/head_pic/2.webp",
          amount: 5468.8,
          count: 18
        },
        {
          username: "芒夏。",
          head_pic: "https://qiniuyun.zhichi921.com/head_pic/3.webp",
          amount: 4986.8,
          count: 17
        }
      ],
      paihang_index: '<span style="color:red">3</span>'
    };
  },
  methods: {
    sevenFilter() {
      this.timeFilterType.thirty = "info";
      this.timeFilterType.seven = "warning";
    },
    thirtyFilter() {
      this.timeFilterType.seven = "info";
      this.timeFilterType.thirty = "warning";
    },
    clearFilter() {
      this.systemQueryValue = "all";
      this.timeQuery = [];
      this.timeFilterType.seven = "info";
      this.timeFilterType.thirty = "info";
    },
    indexMethod(index) {
      // if (index == 0) {
      //   return "200";
      // } else if (index == 1) {
      //   return 2;
      // } else if (index == 2) {
      //   return 3;
      // } else {
      //   return index + 1;
      // }
      return "0" + (index + 1);
    }
  },
  mounted() {
    // this.paihang_index = 2
  }
};
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 10px;
}
.page_title {
  font-size: 14px;
}
.el-tag {
  cursor: pointer;
  margin-right: 10px;
}
.clear_filter {
  font-size: 14px;
  cursor: pointer;
  line-height: 32px;
}
.statistics {
  text-align: center;
  .el-col {
    margin-top: 10px;
    border-right: 1px dotted #eee;
    div:nth-child(1) {
      font-size: 26px;
      margin-top: 10px;
    }
    div:nth-child(2) {
      font-size: 14px;
      color: #aaa;
    }
  }
  .el-col:last-child {
    border: none;
  }
}
.charts,
.paihang {
  display: flex;
  justify-content: space-between;
  .el-card {
    width: 49.6%;
  }
}
.tools {
  text-align: center;
  .el-col {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    i {
      display: block;
      margin: 0 20px;
      width: 48px;
      height: 48px;
      line-height: 48px;
      font-size: 24px;
      color: #fff;
      background-color: #409eff;
      border-radius: 6px;
    }
  }
}
.top_paihang {
  display: flex;
  justify-content: space-between;
  span {
    line-height: 28px;
  }
}
.paihang {
  .el-card__body {
    padding-top: 0 !important;
  }
  .el-table {
    margin: 0;
  }
}
.userInfo {
  display: flex;
  align-items: center;
  img {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    margin-right: 10px;
  }
}
</style>
